<template> 
    <!-- 订单详情子组件 -->
	<view>
		<view class="back-name block" style="padding: 0;">
			<view class="back-name-item">
				<view class="b-title m-title" v-if="model.activity">
					{{model.activity.alias}}
				</view> 
				<view class="padding">
				   <template v-if ="is_pre == 0">
					   <view class="b-num">
							<text class="num marR colorh">共 {{goods.length}} 件 </text>
							<text class="priceTotal colorh">
								<text v-show="order_status == 0">待付款</text>
								<text v-show="order_status != 0">总金额</text>
								<text style="margin-left: 20rpx;" :class="{red:order_status == 0}">
									¥ {{model.order_total_amount}}
								</text>
							</text>
					   </view>
				   </template>
				   <template v-if="is_pre == 1"> 
					  <!-- 待支付 -->
					   <view class="b-num">
							<text class="num marR colorh">共 {{goods.length}} 件</text>
							<text class="priceTotal colorh marR">
								<text>总金额</text>
								<text style="margin-left: 20rpx;">¥ {{model.order_total_amount}}</text>
							</text>
						<!-- 	<text class="priceTotal colorh marR">
								 预付款
								<text style="margin-left: 20rpx;">¥ {{getTotel(goods,'goods_pay_price')}}</text>
							</text> -->
					   </view>
					   <view class="b-num">
							<text class="priceTotal colorh marR">
								<text v-show="order_status == 0">
									待支付预付款
								</text>
								<text v-show="order_status == 1 || order_status == 2 || order_status == 3 || order_status == 4 || order_status == 5">
									预付款
								</text>
								<text v-show="order_status == 8 || order_status == 7">
									已预付
								</text>
								<text style="margin-left: 20rpx;" :class="{red:order_status == 0}">
									¥ {{getTotel(goods,'goods_pay_price')}}
								</text>
							</text>
							<text class="priceTotal colorh marR">
								<text v-show="order_status == 0 || order_status == 1 || order_status == 2 || order_status == 3 || order_status == 4 || order_status == 5 || order_status == 7">
									尾款
								</text>
								<text v-show="order_status == 8">
									待支付尾款
								</text>
							</text>
							<text class="marR colorh" :class="{red:order_status == 8}">
							   	¥ {{(model.order_total_amount - getTotel(goods,'goods_pay_price')).toFixed(2)}}
							</text>
					   </view>
				   </template>
			    </view>
			</view>
		</view>
		<!-- goods -->
		<view class="back-name block" >
			<view class="back-name-item" v-for="(item,index) in goods" :key="index">
				<!-- <view class="back-btn" @tap='test'>
					申请售后
				</view> -->
			
				<template v-if="is_pre == 0">
					<view class="b-title">
						{{item.goods_name}}
					</view>
					<view class="b-num"> 
					    <text class="colorh marR">× {{item.quantity}}</text>
						<text class="colorh marR"> 
							<text v-show="order_status == 0">待付款</text>
							<text v-show="order_status != 0">售价</text>
							<text :class="{red:order_status == 0}" style="margin-left: 20rpx;">¥ {{item.goods_pay_price}}</text></text>
					  </text>
					</view>
				</template>
				<template v-if="is_pre == 1">
					<view class="b-title">
						【预售】{{item.goods_name}}
					</view>
					<view class="b-num">
						<text class="colorh marR">× {{item.quantity}}</text>
					    <text class="colorh marR">售价： 
						<text>¥ {{item.total_price}}</text></text>
					</view>
					<view class="b-num"> 
							<text class="colorh marR" v-show="order_status == 0">
								待支付预付款
							</text>
							<text class="colorh marR" v-show="order_status == 1 || order_status == 2 || order_status == 3 || order_status == 4 || order_status == 5">
								预付款
							</text>
							<text class="colorh marR" v-show="order_status == 8 || order_status == 7">
								已预付
							</text>
						 <text class="colorh marR" :class="{red:order_status == 0}" >¥ {{item.goods_pay_price}}</text>
					      <text class="priceTotal colorh marR">
							<text v-show="order_status == 0 || order_status == 1 || order_status == 2 || order_status == 3 || order_status == 4 || order_status == 5 || order_status == 7">
								尾款
							</text>
							<text v-show="order_status == 8">
								待支付尾款
							</text>
						</text>
						<text class="colorh marR" :class="{red:order_status == 8}">¥ {{wkTotel(item.total_price,item.goods_pay_price)}}</text>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		computed: {
			
		},
		props:['model','goods','is_pre','order_status'],
		mounted() {
			// console.log('goods',this.goods);
		},
		created() {
			// console.log('goods11',this.goods);
		},
		methods: {
			getTotel(array,k) {
				const prices = array.map(item => item[k]);
				const sum = prices.reduce((acc,  curr) => Number(acc) + Number(curr), 0);
				return  sum.toFixed(2);
			},
			wkTotel(a,b) {
				const sum = Number(a) -  Number(b);
				return  sum.toFixed(2);
			},
			test() {
				console.log('goods',this.goods);
				console.log('is_pre',this.is_pre);
				console.log('order_status',this.order_status);
				console.log('model',this.model)
			}
		}
	}
</script>
<style lang="scss">
	.red {
		color: #ff4f4f !important;
	}
	.back-name {
		background-color: #fff;
		font-size: 30rpx;
		line-height: 40rpx;
		padding: 36rpx 35rpx 4rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
		    &.after {
				background-color: #fff;
			    padding: 0 30rpx;
					 &:last-of-type {
							  margin-bottom: 0;
						  }
						  .head {
							height: 72rpx;
							width: 100%;
							display: flex;
							padding-top: 30rpx;
							position: relative;
							.h-icon {
								width: 35rpx;
								height: 35rpx;
								margin-right: 20rpx;
							}
							.h-icon2 {
								margin-left: 20rpx;
								width: 14rpx;
								height: 22rpx;
								top: 2rpx;
								position: relative;
							}
							.status {
								color:#ff4f4f;
								position: absolute;
								top:26rpx;
								right: 0;
								font-size: 29rpx;
							}
						  }
						  .body {
							  padding: 15rpx 0 16rpx;
							  border-bottom: 1px solid #f5f5f5;
							  .name {
								  color: #333333;
								  font-size: 32rpx;
								  line-height:48rpx;
								  margin-bottom: 15rpx;
							  }
							  .f-name {
								  color:#a6a6a6;
								  font-size: 28rpx;
								  margin-bottom: 8rpx;
								  .price {
									  color:#ff4f4f;
								  }
							  }
							  .af-info {
								  background-color: #f7f7f7;
								  padding: 32rpx 32rpx 22rpx; //10
								  line-height: 40rpx;
								  border-radius: 20rpx;
								  margin-bottom: 10rpx;
								  .af-name {
									  font-size: 28rpx;
									  margin-bottom: 5rpx;
								  }
								  .af-num {
									  font-size: 26rpx;
									  color:#a6a6a6;
									  .priceBox {
										  margin-left: 15rpx;
									  }
									  .price {
										  color:#ff4f4f;	
									  }
								  }
							  }
						  }
						  .foot {
							  width: 100%;
							  height: 118rpx;
							  display: flex;
							  justify-content: space-between;
							  align-items: center;
							  .left, .right {
								  .left-text {
									  margin-right: 20rpx;
									  font-size: 29rpx;
								  }
								  display: flex;
							  }
						  }
				}
			
		   .back-name-item {
			margin-bottom: 30rpx;
			// &:last-of-type {
			// 	margin-bottom: 0;
			// }
			position: relative;
			.back-btn {
				width: 155rpx;
				height: 64rpx;
				background-color: #ffebeb;
				color:#ff4f4f;
				border-radius: 18rpx;
				position: absolute;
				right: 0;
				top:75rpx;
				font-size: 26rpx;
				z-index: 9999999;
				@include center;
			}
		}
		.b-title {
			margin-bottom: 10rpx;
			&.m-title {
				background-color:#388cff;
				color:#fff;
		        box-shadow:0px 1px 10px #388cff;
				padding: 29rpx 34rpx;
			}
		}
		.padding {
			padding: 10rpx 35rpx 4rpx;
			
		}
		.b-num {
			height: 56rpx;
			line-height: 56rpx;
			font-size: 29rpx;
			.marR{
				margin-right: 30rpx;
			}
			
		    position: relative;
			.num {
				
				
			}
			.posR {
				position: absolute;
				right: 0;
				top:2rpx;
				font-size: 28rpx;
			}
		}
	}
</style>